	* {
	  margin: 0;
	  padding: 0;
	}

	html,
	body {
	  width: 100%;
	  height: 100%;
	  font-family: '楷体';
	}

	body {
	  /* background-color: #DCDFE6; */
	  background-color: black;
	  display: flex;
	}

	.box-0 {
	  width: 208px;
	  height: 308px;
	  margin: 100px 40px;
	  border: 4px solid white;
	  perspective: 800px;
	  /* 设置视点 */
	  float: left;
	  cursor: pointer;
	}

	.box-0 .box {
	  width: 200px;
	  height: 300px;
	  border: 4px solid #DCDFE6;
	  transition: transform 1.5s linear;
	  position: relative;
	  transform-style: preserve-3d;
	  /* 开启3D */
	}

	.box-0 .box img {
	  display: block;
	  width: 200px;
	  height: 300px;
	  position: absolute;
	}

	.box-0 .box p {
	  width: 200px;
	  height: 300px;
	  background-image: linear-gradient(#FEF6A9, #F98674);
	  font-size: 18px;
	  color: black;
	  position: absolute;
	  top: 0;
	  left: 0;
	  transform: rotateY(180deg);
	}

	.box-0 .box p span:nth-child(1) {
	  text-align: center;
	  display: block;
	  width: 200px;
	  height: 40px;
	  line-height: 40px;
	  border-bottom: 1px solid #DCDFE6;
	  color: #409EFF;
	}

	.box-0 .box p span:nth-child(2),
	.box-0 .box p span:nth-child(3),
	.box-0 .box p span:nth-child(4),
	.box-0 .box p span:nth-child(5) {
	  text-align: left;
	  display: block;
	  width: 200px;
	  height: 40px;
	  line-height: 40px;
	}

	.box-0 .box:hover {
	  transform: rotateY(180deg);
	}